<template>
	<view>
		<view class="map">
			<image class="one" src="https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/map_logo.png" alt="">
			</image>
			<image class="one" src="https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/city_1.png" alt=""></image>
			<view class="home_list" v-for="item in home_list" @click="home_list_link(item.url)">
				<image class="two" :src="item.image" alt=""></image>
				<view class="home_text">
					<image class="three" :src="item.logo" alt=""></image>
					<span><u-icon color="#4094d0" labelColor="#4094d0" labelSize="14px" :label="item.address"
							name="map-fill"></u-icon></span>
					<h2>{{item.title}}</h2>
					<p>{{item.text}}</p>
				</view>
			</view>
			<image style="height: 220rpx;" class="one"
				src="https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/erweima.png" alt=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				home_list: [{
						image: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home.png',
						logo: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_logo.png',
						url: '/pages/good/good',
						title: "铁建投城发·松苑",
						address: "郑州",
						text: "北龙湖十年成就制高点 时代人居创新之作",
					},
					{
						image: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_1.jpg',
						logo: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_logo.png',
						url: '/pages/good/good',
						title: "铁建投城发·花栖樾",
						address: "郑州",
						text: "一湾贾鲁河生态绿脊 一席花栖樾悠然时光",

					},
					{
						image: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_1.jpg',
						logo: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_logo.png',
						url: '/pages/good/good',
						title: "铁建投城发·花栖樾",
						address: "郑州",
						text: "一湾贾鲁河生态绿脊 一席花栖樾悠然时光",

					},
					{
						image: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_1.jpg',
						logo: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_logo.png',
						url: '/pages/good/good',
						title: "铁建投城发·花栖樾",
						address: "郑州",
						text: "一湾贾鲁河生态绿脊 一席花栖樾悠然时光",

					},
					{
						image: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_1.jpg',
						logo: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_logo.png',
						url: '/pages/good/good',
						title: "铁建投城发·花栖樾",
						address: "郑州",
						text: "一湾贾鲁河生态绿脊 一席花栖樾悠然时光",

					},
					{
						image: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_1.jpg',
						logo: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_logo.png',
						url: '/pages/good/good',
						title: "铁建投城发·花栖樾",
						address: "郑州",
						text: "一湾贾鲁河生态绿脊 一席花栖樾悠然时光",

					},
					{
						image: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_1.jpg',
						logo: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_logo.png',
						url: '/pages/good/good',
						title: "铁建投城发·花栖樾",
						address: "郑州",
						text: "一湾贾鲁河生态绿脊 一席花栖樾悠然时光",

					},
					{
						image: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_1.jpg',
						logo: 'https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/home_logo.png',
						url: '/pages/good/good',
						title: "铁建投城发·花栖樾",
						address: "郑州",
						text: "一湾贾鲁河生态绿脊 一席花栖樾悠然时光一席花栖樾悠然时光一席花栖樾悠然时光一席花栖樾悠然时光",

					}
				],
			};
		},
		methods: {
			home_list_link: function(url) {
				uni.switchTab({
					url: url
				})
			},
		},
	}
</script>

<style lang="scss">
	.map {
		background: url(https://tjyzsz.oss-cn-beijing.aliyuncs.com/ohter/static/map.jpg) no-repeat;
		background-size: cover;
		width: calc(100vw - 160rpx);
		padding: 80rpx;

		.one {
			width: 80%;
			margin: 60rpx auto;
			display: block;
		}

		.home_list {
			border: 2rpx solid #4094d0;
			padding: 10rpx;
			border-radius: 8rpx;
			margin-bottom: 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background: #fff;

			.two {
				width: 192rpx;
				height: 136rpx;
			}

			.home_text {
				width: 62%;
				position: relative;
				color: #4094d0;

				.three {
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					height: 40rpx;
					width: 134rpx;
				}

				span {
					display: flex;
					flex-wrap: wrap;
					font-size: 24rpx;
					margin-top: 10rpx;
				}

				h2 {
					font-size: 28rpx;
					line-height: 56rpx;
					border-bottom: 2rpx solid #4094d0;
					height: 56rpx;
					display: -webkit-box;
					overflow: hidden;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					font-weight: bold;
				}

				p {
					line-height: 36rpx;
					font-size: 20rpx;
					height: 36rpx;
					display: -webkit-box;
					overflow: hidden;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>